<template>

	<div id="wrap">

      <!-- 页面刚打开，白屏时展示的图片 -->
<!--       <img :src="previewBg" style="display:block;width:22.7%;height:auto;margin-top:37% ;margin-left: auto;margin-right:auto; " v-show="noPage">  -->

		  <loadingBar v-if="isLoading" ref="loadingBar" :loadingType="loadingType" ></loadingBar>

      <!-- 需要缓存的 -->
	    <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>

      <!-- 不需要缓存的 -->
      <router-view v-if="!$route.meta.keepAlive"></router-view>

  	</div>
</template>
<script>

// import preview from '../../static/images/preview.png'

import loadingBar from "@src/common/loadingBar/loadingBar";

export default {
  name: 'app',
  data: function (){
    return {
    	isLoading: true,
      loadingType: '',
      backUrl: 'close',
      noPage: true,
      openOnce: true //用于判断是否第一次打开页面
      // previewBg: preview
    }
  },
  components: {
    loadingBar
    //改成懒加载
    // loadingBar : resolve => require(['@src/common/loadingBar/loadingBar'])
  },
  created: function(){

    if( this.$parent.$data.isLoading === false){
      this.isLoading = this.$parent.$data.isLoading
    }
  },

  watch: {
    '$route': function(to, from) {

        if( to.name && to.path ){
            //在下一个路由有意义时隐藏图片
            document.getElementById('previewImg').style.display = 'none'
        }

        //路由改变时，发送埋点

        //离开页面的埋点
        from.name && from.path && window._submitMd && window._submitMd(2, from.path );

        //进入页面的埋点，
        //因为vue项目进入页面之后  从/添加上自己的路由后  会发一次埋点
        //而埋点代码里又会发一次
        //因此这里加一个判断  防止进入页面会发两次请求
        if( !this.openOnce ){
          to.name && to.path && window._submitMd && window._submitMd(1, to.path);
        }

        this.openOnce = false;
    }
  },
  mounted: function(){

    this.$refs.loadingBar && this.$refs.loadingBar.open();

    if( this.$parent.$data.blueLoading ){

      //如果是蓝色的loading，修改loadingBar组件的颜色
      this.loadingType = 'blue';

      //获取loading节点
      let $el = document.getElementsByClassName('mint-indicator')[0].getElementsByClassName('mint-spinner-snake')[0];

      let $el_cla = $el.className;

      $el.className = $el_cla + ' blue';
    }



  },
  methods:
  {
      //loading改变
      changeLoading:function(status) {
        // this.isLoading = status;
        if( status ){
        	this.$refs.loadingBar && this.$refs.loadingBar.open();
        }
        else{
        	this.$refs.loadingBar && this.$refs.loadingBar.close();
        }
      }
  }
};
</script>
<style>
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
    background: #fafafa;
}
</style>
